/************** 总容器 ****************/
.wrapper{
    width: 100%;
    background: #f2f2f2;
}
/************** header部分 ****************/
.wrapper header{
    width: 100%;
    height: 14vw;
    background: #3399ff;
    font-size: 6vw;
    color: white;

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 99;
}


/************** 火车票订单和提示部分 ****************/
.wrapper .train-order-tips{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding-top: 14vw;
}
.wrapper .train-order-tips .train-order{
    font-size: 4.5vw;
    font-weight: bold;
    padding: 2vw;
}
.wrapper .train-order-tips a{
    text-decoration: underline;
    color: #66b1ff;
    padding: 1vw;
    font-size: 3.6vw;
}
.wrapper .train-order-tips {
    border-bottom: 1.8px solid #d9d9d9; /* 下划线样式，可以根据需要调整粗细和颜色 */
    padding-bottom: 5px; /* 可选：添加一些底部间距，使下划线不紧贴文本 */
}

/************** 订单状态部分 ****************/
.wrapper .order-status{
    padding-top: 2vw;
    background: #ffffff;
    display: flex;
    align-content: center;
    justify-content: space-around;
}

.wrapper .order-status li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    user-select: none;
    cursor: pointer;

}
.wrapper .order-status li img{

    width: 10vw;
    height: 10vw;
}
.wrapper .order-status li p{
    margin-top: 0.7vw;
    font-size: 3.8vw;
    padding-bottom: 5vw;
}

/************** 其他订单部分 ****************/
.wrapper .other-order {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    margin-top: 2vw;
    padding: 2vw;
    max-height: calc(9vw * 6 + 4.2vw * 5); /* 默认显示六个订单项的高度 */
    overflow: hidden; /* 超出部分隐藏 */
    position: relative; /* 相对定位，为展开时的动画准备 */
}

.wrapper .other-order.expanded {
    max-height: none; /* 展开时取消最大高度限制 */
}

.wrapper .other-order li {
    display: flex;
    align-items: center;
    margin-bottom: 4.2vw;
    position: relative;
}

.wrapper .other-order li img {
    width: 9vw;
    height: 9vw;
}

.wrapper .other-order li p {
    margin-left: 4vw;
    font-size: 3.8vw;
}

.wrapper .other-order li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 12%;
    width: 88%;
    height: 1px;
    background-color: #e6e6e6;
}
/************** 收起部分 ****************/
.wrapper .hide {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2vw;
    position: relative;
}

.wrapper .hide i {
    font-size: 5vw;
}

.wrapper .hide a {
    font-size: 3.8vw;
    color: black;
}

/************** 广告部分 ****************/
.wrapper .ad{
    padding-bottom: 14vw;
}
.wrapper .ad img{
    width: 100%;
}

/************** 底部菜单部分 ****************/
.wrapper .footer{
    width: 100vw;
    height: 14vw;
    border-top: solid 1px #DDD;
    background-color: white;

    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
}
.wrapper .footer li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: black;
    user-select: none;
    cursor: pointer;
}
.wrapper .footer li p{
    font-size: 2.8vw;
}
.wrapper .footer li i{
    font-size: 5vw;
}

.wrapper .footer .order{
    color: #007fff;
}